然后将div及伪元素的宽高计较出来并配置；2、把正六边形分成三个宽高沟通的div。

html代码： div class=div/div css代码： .div {position: relative;width: 50px;height: 86.6px;margin: 50px auto;background-color: red;}.div:before {content: ;display: block;position: absolute;width: 0;height: 0;right:50px;border-width: 43.3px 25px;border-style: solid;border-color: transparent red transparent transparent;}.div:after {content: ;display: block;position: absolute;width: 0;height: 0;left:50px;border-width: 43.3px 25px;border-style: solid;border-color: transparent transparent transparent red;top:0;} 留意div及伪元素的宽高需要按照上面的公式计较，然后利用定位以及css3 transform:rotate别离向阁下旋转60deg形成正六边形即可，正六边形的每个内角是60deg， 要领二：也是把正六边形分成三个宽高沟通的div， css画出六边形的要领：1、把正六边形分成三部门，-50%); transform: rotate(300deg); border-top: 1px solid red; border-bottom: 1px solid red;} 以上就是css六边形怎么画的具体内容，然后利用定位以及css3 transform:rotate别离向阁下旋转60deg形成正六边形。

after三角形部门是div的after伪元素， 本教程操尽兴况：windows7系统、css3版本、Dell G3电脑。

如图： before三角形部门是div的before伪元素。

如图（√3其实是根号3）： 要领一：道理把正六边形分成三部门，如图： html代码： div style=position:relative;width:100px;margin:0 auto;div class=one/divdiv class=two/divdiv class=three/div/div css代码: .one { width: 50px; height: 86.6px; margin: 0 auto; border-top: 1px solid red; border-bottom: 1px solid red; }.two { position: absolute; width: 50px; height: 86.6px; left: 25px; top: 0; transform: translate(-50%，after部门，div部门，-50%); transform: rotate(60deg); border-top: 1px solid red; border-bottom: 1px solid red; }.three { position: absolute; width: 50px; height: 86.6px; left: 25px; top: 0; transform: translate(-50%，左中右别离是：before部门，更多请存眷红联其它相关文章！ ， 推荐： css视频教程 首先相识一下正六边形内角和边的干系，。